<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .mask{
            position: fixed;
            background-color: rgba(0,0,0,.3);
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi asperiores assumenda at, delectus eum,
        illo iure, iusto odio officia quasi quidem quo repellat saepe voluptatum. In obcaecati possimus saepe!
    </div>
    <div>Accusamus amet debitis ducimus eius error explicabo facere facilis impedit, inventore ipsam ipsum iste itaque
        laboriosam nam pariatur quaerat quia, quod ratione recusandae reprehenderit similique vero vitae voluptate
        voluptatem voluptatum.
    </div>
    <div>Adipisci beatae dolore eius eligendi esse eum excepturi fuga fugit illum in inventore ipsum iusto labore magnam
        molestiae obcaecati, provident quaerat quasi quia quis rem repellat rerum sed soluta vel.
    </div>
    <div>Dolor doloremque ducimus eligendi quibusdam sequi, temporibus veritatis. Amet assumenda iste porro praesentium
        tempora. Doloremque doloribus eaque fugiat labore perspiciatis provident quaerat quidem quisquam quo rem,
        tempora, vel velit voluptatum?
    </div>
    <div>A alias aliquam aspernatur atque, blanditiis corporis culpa distinctio dolorem dolores ducimus in inventore
        ipsa laborum laudantium libero magni, minima necessitatibus nihil non quo recusandae repudiandae rerum sint sunt
        voluptates?
    </div>
    <div>Ad alias aliquid architecto at atque ea, et fugit harum ipsam minus molestias nemo nisi nobis quis quo totam
        velit veniam. Animi cum eius laudantium maiores quia voluptate. Commodi, doloribus!
    </div>
    <div>Animi harum hic illo itaque nam odit quaerat repellendus sapiente totam? Assumenda atque blanditiis consequatur
        culpa deserunt id ipsa natus neque, pariatur perspiciatis provident quaerat qui quisquam tempore vero
        voluptatem.
    </div>
    <div>Ab accusantium, architecto, commodi corporis dolor ea est, fugiat nihil nostrum numquam quam qui quod
        recusandae rem repudiandae sunt tenetur velit! Asperiores debitis distinctio, earum illo in labore recusandae
        saepe!
    </div>
    <div>Doloribus eum excepturi id mollitia pariatur repellendus reprehenderit sed, sint suscipit voluptatibus? At cum
        deserunt ea enim exercitationem, illum laboriosam minima nihil obcaecati quos reprehenderit ullam, unde vel?
        Officiis, voluptatem.
    </div>
    <div>Autem dignissimos eius eveniet explicabo illo magnam optio reprehenderit, repudiandae veniam voluptates. Alias
        aperiam, culpa, distinctio ea eos ex facilis itaque libero molestiae nihil pariatur perferendis reiciendis sit
        totam voluptatibus.
    </div>
    <div>A consequuntur deleniti id nulla veritatis? Adipisci distinctio maxime minima quaerat quod. Aspernatur at
        beatae, blanditiis culpa dolor magnam maiores necessitatibus neque nobis quibusdam quod ratione reiciendis vero
        voluptas voluptate.
    </div>
    <div>Asperiores at blanditiis commodi culpa cumque dolorum ea eaque enim eveniet exercitationem explicabo facere
        fugit id laboriosam nam natus necessitatibus odit quaerat quos, repellat sequi sint tempora totam velit
        voluptas?
    </div>
    <div>Accusantium alias autem deleniti, ducimus libero magni quasi tempore veniam? Ab accusantium, distinctio dolores
        esse itaque libero minima minus molestiae molestias nisi nostrum tempore totam? Cum eum nesciunt qui
        voluptatibus!
    </div>
    <div>Adipisci architecto beatae dignissimos dolore, eum incidunt inventore iusto labore libero maxime modi quasi rem
        ut. Blanditiis dignissimos ducimus ea esse eum excepturi expedita facilis, ipsam molestiae quaerat qui quis.
    </div>
    <div>Deleniti fuga itaque necessitatibus nostrum quae quaerat quas sed? Aspernatur at atque error in odit reiciendis
        voluptates, voluptatum! Et facere illum itaque necessitatibus perferendis porro recusandae rerum soluta,
        suscipit. Quibusdam?
    </div>
    <div>Ad aliquid, amet asperiores, atque beatae culpa debitis dignissimos dolorem dolorum ea eius expedita harum hic
        impedit itaque iure magni odio optio perspiciatis quas quisquam reiciendis repellendus repudiandae tempora,
        voluptates!
    </div>
    <div>Alias aliquid asperiores culpa distinctio doloremque est eveniet exercitationem ipsam iste laboriosam
        laudantium magni minus mollitia necessitatibus possimus praesentium quaerat, quo reprehenderit sunt totam.
        Assumenda dolorem earum est laudantium reiciendis!
    </div>
    <div>Aut debitis dolore eius enim explicabo quod repudiandae. Aliquid deleniti hic iusto nihil! Consequatur corporis
        dolores et magnam necessitatibus obcaecati rem suscipit vitae voluptas voluptatem. Alias autem distinctio eos
        placeat?
    </div>
    <div>Accusantium amet architecto assumenda commodi, dolore ea earum error esse iusto magni maxime neque nihil nobis
        nulla odio officiis perspiciatis quae qui quo repudiandae rerum totam ullam, veniam vero voluptatum.
    </div>
    <div>Autem eos, explicabo iste laboriosam minima odit repudiandae? Ab, adipisci beatae dolores dolorum fugit harum
        iste laboriosam magni, necessitatibus nemo non perferendis possimus quos repellat repudiandae sapiente
        temporibus ut. Voluptatum?
    </div>
    <div>Beatae blanditiis cupiditate, debitis delectus distinctio error est eum excepturi exercitationem fugiat id,
        illo ipsa iste modi nam nisi non pariatur possimus qui quidem repellendus repudiandae sunt? At, eligendi, magni.
    </div>
    <div>A aperiam consectetur distinctio dolore est eveniet facere minus natus, porro quibusdam ut voluptates. Ad
        beatae eius eligendi libero nobis obcaecati quasi sunt? Aut autem delectus labore laudantium modi vel.
    </div>
    <div>Blanditiis earum iste maiores tempora ut? Aperiam corporis culpa deleniti, dolor earum eos expedita explicabo
        impedit labore obcaecati perferendis possimus quam quia repellat vel, voluptates voluptatibus? Dolor ex mollitia
        sapiente.
    </div>
    <div>Aut doloribus enim illo nihil quaerat qui quis veniam, voluptate! Error inventore ipsa ipsam nihil quas quasi
        quos voluptatum. At corporis culpa, cum cupiditate dicta dolorem labore nobis reprehenderit saepe!
    </div>
    <div>Aliquid dolore harum id itaque libero minima modi molestiae possimus voluptas voluptate? Aut eum in inventore
        necessitatibus nostrum quam reiciendis totam! Eum ex labore modi sunt unde. Amet consequuntur, voluptatum?
    </div>
    <div>Ab consectetur, consequatur cupiditate dolor dolorem dolores eius esse illo inventore ipsa iusto modi omnis
        praesentium quia sint ut veniam? Aut eveniet ipsum iusto, placeat qui sequi sit veritatis voluptate.
    </div>
    <div>Blanditiis dignissimos eaque in suscipit! Enim illo laboriosam magni quas vero. Alias amet deserunt ex fugit,
        harum incidunt, ipsam laboriosam modi omnis praesentium quae tempore tenetur! Et inventore officiis repellendus!
    </div>
    <div>A accusantium ad asperiores, aspernatur autem beatae commodi cum dicta dolores dolorum eligendi, hic impedit
        laudantium necessitatibus numquam odit praesentium quo ratione rem repellendus, sed similique tenetur vitae
        voluptatibus voluptatum?
    </div>
    <div>Aperiam aut beatae consequatur delectus ea fugiat illo incidunt laudantium, magni perspiciatis possimus quia
        sed, similique, sint soluta tenetur vel. Assumenda exercitationem magni minus nisi omnis perferendis temporibus
        totam. Atque?
    </div>
    <div>Alias aut blanditiis, corporis, cumque deleniti dolorem dolorum id iste maxime, minima obcaecati officia rem
        reprehenderit similique soluta totam voluptatem voluptates. Eius ex nobis numquam provident quo saepe tempora
        ullam?
    </div>
    <div>Aperiam dolorem harum laborum nihil quam reprehenderit? Accusamus amet autem, dolore dolorum earum eligendi
        expedita facere hic illo in libero minima nemo odio quaerat, quas reprehenderit totam vel veniam voluptates.
    </div>
    <div>Aliquid cum cupiditate, debitis deserunt dignissimos ducimus eligendi est facere, fugit impedit incidunt ipsum
        iure iusto laborum maxime minus mollitia nesciunt odit quas repudiandae sint soluta, suscipit temporibus totam
        voluptates.
    </div>
    <div>Dolor facilis harum iusto laboriosam recusandae temporibus ut vitae? At, beatae dicta eius esse et modi
        molestiae odit perferendis praesentium quis repudiandae sapiente sequi soluta veniam veritatis! Cupiditate,
        natus, odio.
    </div>
    <div>Asperiores aspernatur commodi cum cumque cupiditate dolor dolores earum eligendi eveniet harum impedit
        incidunt, laudantium magnam, nemo nobis omnis quaerat quas ratione reprehenderit sint unde vel veniam vitae
        voluptatibus voluptatum?
    </div>
    <div>Ab beatae dolores eos facere fugit labore nemo officiis perspiciatis quisquam veritatis? Assumenda at
        blanditiis doloremque esse, ex facilis fugit, impedit ipsum labore, laudantium maxime natus quasi quia
        reprehenderit tempore.
    </div>
    <div>Commodi consequuntur cumque cupiditate dicta dolorem doloribus, ea error ex impedit in inventore laborum libero
        magni minus modi molestiae nostrum optio provident quae quas, reiciendis rem rerum sed soluta sunt!
    </div>
    <div>Amet enim omnis possimus similique voluptatem? Ad atque autem dolores impedit, molestiae mollitia nesciunt quam
        veniam! At atque beatae distinctio dolorum eaque enim illo ipsum numquam quos recusandae sunt, voluptate!
    </div>
    <div>Aliquam blanditiis dolorem dolorum eum eveniet expedita laborum nulla, quae quo, rerum similique sit tempora?
        Ab accusantium adipisci esse est fugiat iste nobis non perspiciatis quis reiciendis, sit ullam voluptatibus.
    </div>
    <div>Architecto cupiditate debitis nostrum recusandae sunt! Adipisci distinctio earum fugit harum ipsam magni natus
        nobis nulla quisquam ratione? Adipisci amet expedita inventore ipsam libero magni, maxime quam. Illum incidunt,
        placeat!
    </div>
    <div>Ad amet culpa dignissimos, excepturi minus molestias mollitia officia provident totam vitae! Alias amet atque
        delectus est eum exercitationem expedita quod! Dolore iste magnam perspiciatis repellendus voluptatibus!
        Laboriosam, omnis rerum?
    </div>
    <div>Amet aperiam architecto culpa error eveniet explicabo harum iste iure, necessitatibus quia. Accusantium alias
        consectetur culpa cum dicta dolore impedit incidunt iusto, laudantium minima nostrum pariatur quaerat quas
        quidem reprehenderit.
    </div>
    <div>Accusamus consequatur deleniti minus odio quaerat vero! Ab ad commodi et eveniet expedita facere fugiat harum
        hic iusto, minima molestias neque odio quaerat quibusdam quod rem rerum saepe sequi tenetur?
    </div>
    <div>Amet aspernatur beatae consequatur cum cupiditate dolor dolore eligendi eos, et excepturi facere, fuga fugiat
        laudantium molestias nihil nulla placeat repellat repellendus saepe sed sequi sit voluptatum? A, aspernatur
        nisi.
    </div>
    <div>Earum exercitationem ipsa ipsam quam voluptas? Ea impedit itaque maiores molestiae optio quod reprehenderit
        voluptatem! Alias, consequatur cumque eaque eius esse in, magni mollitia natus obcaecati odio, odit pariatur
        repellendus!
    </div>
    <div>Ab aliquid aperiam beatae corporis ea eligendi eum facilis laboriosam modi nulla odit omnis pariatur, porro
        quidem quos totam velit. Aspernatur at harum iure iusto libero maiores obcaecati omnis quidem?
    </div>
    <div>Exercitationem iure, saepe. A aspernatur at aut deleniti dolores ducimus eaque excepturi expedita inventore
        minima numquam odio officia officiis optio quam quas quasi recusandae repudiandae sapiente sed sit ut,
        voluptates.
    </div>
    <div>Asperiores dolor harum illum impedit mollitia quas, reprehenderit tempora. Accusantium dicta distinctio dolor
        ducimus enim error, esse expedita facilis illo ipsum maiores non officia pariatur quas soluta tenetur voluptatem
        voluptatibus!
    </div>
    <div>Aut eos fugit impedit maiores maxime. Ab autem consectetur deleniti ea enim harum laborum magni maiores minus,
        natus nihil, numquam quae recusandae sapiente soluta temporibus tenetur. Expedita illum obcaecati veniam!
    </div>
    <div>Ipsum possimus, quos! Accusamus accusantium debitis facere facilis, fugiat incidunt labore sed soluta ullam
        voluptatibus. Amet assumenda at consequuntur debitis dolorem eligendi eos est explicabo laborum maxime, soluta
        tempora ut.
    </div>
    <div>Aperiam aspernatur blanditiis cumque doloribus earum eius eos et eveniet explicabo, id magni nam neque nihil,
        nisi odio officiis quam quas qui rerum saepe sit ullam vel vero. Inventore, sequi?
    </div>
</div>
</body>
</html>